<template>
<div>
	<Card>
		<p slot="title">栏目文章管理</p>

		<table class="minitable" w10>
			<tr v-for="(item, key) in items" :key="key">
				<td w9>{{item.label}}</td>
				<td><span blue linkable @click="handleShowCreateModal(key)">编辑</span></td>
			</tr>
		</table>
	</Card>

	<Modal v-model="showModal" :title="currentItem.label" width="75" :mask-closable="false">
		<Article v-if="showModal" :ref="articleRef" :value="model"></Article>
		
        <div slot="footer">
            <Button type="primary" @click="handleSave">保存</Button>
            <Button @click="showModal=false">取消</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import Article from '../../components/common/article.vue'

@Component({
	components: { Article }
})
export default class ColumnArticleManager extends AbpBase{
	showModal:boolean=false;
	articleRef:string = this.getRandomRef('article')
	model:any = this.getDefaultModel()
	selectedName:string = ''
	get items() {
		return {
			//'aboutUs': { label: '关于我们', getAction: 'WebsiteInfo/GetAboutUs', setAction: 'WebsiteInfo/SetAboutUs' },
			'companyProfile': { label: '公司简介', getAction: 'WebsiteInfo/GetCompanyProfile', setAction: 'WebsiteInfo/SetCompanyProfile' },
			'corporateCulture': { label: '企业文化', getAction: 'WebsiteInfo/GetCorporateCulture', setAction: 'WebsiteInfo/SetCorporateCulture' },
			'honor': { label: '荣誉资质', getAction: 'WebsiteInfo/GetHonor', setAction: 'WebsiteInfo/SetHonor' },
			'userNotice': { label: '用户公告', getAction: 'WebsiteInfo/GetUserNotice', setAction: 'WebsiteInfo/SetUserNotice', formItems: ['content'] },
			'userAgreement': { label: '会员协议', getAction: 'WebsiteInfo/GetUserAgreement', setAction: 'WebsiteInfo/SetUserAgreement', formItems: ['content'] },
			'contactUs': { label: '联系我们', getAction: 'WebsiteInfo/GetContactUs', setAction: 'WebsiteInfo/SetContactUs', formItems: ['content'] },
		}
	}
	get currentItem() {
		return this.items[this.selectedName] || {};
	}
	getDefaultModel() {
		return {
			picture: '',
			pictures: [],
			description: '',
			content: ''
		}
	}
	async handleShowCreateModal(name) {
		this.selectedName = name;
		var response = await this.get(this.currentItem.getAction);
		if(response.success) {
			if(this.currentItem.formItems) {
				this.model = this.currentItem.formItems.reduce((result, elem) => {
					result[elem] = response.result[elem];
					return result;
				}, {});
			}else {
				this.model = response.result;	
			}
		}
		this.showModal = true;
	}
	handleSave() {
		(this.$refs[this.articleRef] as any).validate(async () => {
			var response = await this.post(this.currentItem.setAction, this.model);
			if(response.success) {
				this.showModal = false;
			}
		});
	}
}
</script>